<!--
* @description  
* @fileName  1_绑定样式
* @author zhoujunlin
* @date 2022-03-01 19:50:08
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_绑定样式</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
    }

    .happy {
        border: 4px solid red;
        background-color: rgba(255, 255, 0, 0.644);
        /* 线性渐变色 */
        background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
        /* 虚线 */
        border: 4px dashed rgb(2, 197, 2);
        background-color: gray;
    }

    .normal {
        background-color: skyblue;
    }

    .atguigu1 {
        background-color: yellowgreen;
    }

    .atguigu2 {
        font-size: 30px;
        text-shadow: 2px 2px 10px red;
    }

    .atguigu3 {
        border-radius: 20px;
    }
</style>
<!-- 
class样式
写法：class="xxx" xxx可以是字符串 对象 数组
字符串写法适用于：类名不确定 要动态获取
数组写法适用于：绑定多个样式 个数不确定  名字也不确定
对象写法适用于：要绑定多个样式 个数确定 名字确定 但不确定用不用
style样式
:style="{fontSize:xxx}" 其中xxx是动态值
:style="[a,b]" 其中a,b是样式对象
 -->

<body>
    <div id="app">
        <div class="basic">{{name}}</div><br><br>
        <!-- 绑定class样式 字符串写法  适用于 样式的类名不确定 需要动态指定 v-bind:class="mood"-->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br><br>
        <!-- 绑定class样式 数组写法  适用于 要绑定的样式个数不确定 名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div> <br><br>
        <!-- 绑定class样式 对象写法 适用于：要绑定的样式个数确定 名字也确定 但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div> <br><br>

        <!-- 绑定style样式 对象写法 v-bind:style="" -->
        <div class="basic" :style="styleObj">{{name}}</div> <br><br>
        <!-- 绑定style样式 数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br><br>
        <!-- 绑定style样式 数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div> <br><br>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: '我要涨工资',
                    mood: 'normal',
                    classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
                    classObj: {
                        atguigu1: false,
                        atguigu2: true,
                    },
                    styleObj: {
                        fontSize: '40px',
                        color: 'red',
                    },
                    styleObj2: {
                        backgroundColor: 'orange'
                    },
                    styleArr: [
                        {
                            fontSize: '40px',
                            color: 'blue'
                        }, {
                            backgroundColor: 'gray'
                        }
                    ]

                }
            },
            methods: { // 方法
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3)
                    // Math.random()	返回 0 ~ 1 之间的随机数，包含 0 不包含 1。
                    // Math.floor(x)	对 x 进行下舍入，即向下取整。
                    this.mood = arr[index]
                }
            }
        });

    </script>
</body>

</html>